<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script type="text/javascript" src="../js/localstorage.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
	<link rel="stylesheet" href="../css/Stylesheet.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
    <style type="text/css">

    * {
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
    	.k-overlay{
    		position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 100;
		    width: 100%;
		    height: 100%;
		    background-color: #000;
		    filter: alpha(opacity=50);
		    display: none;
		    opacity: 0.5;
		}
		.content{
		    display: none;
		    justify-content: center;
		    width: 100%;
		    height: 100%;
		    position: fixed;
		    top: 0;
		    left: 0;
		    align-items: center;
		    z-index: 102
		}
		.content input{padding: 5px;margin: 0px 0px 0px 0px;border-radius: 4px;border:1px solid #ccc;}
		.content thead tr td{border-bottom: 1px solid #ccc;}
		#tree{
			width: 140px;display: none;position: absolute;background: #fff;
		}
		#list{
			position: absolute;right: 0px;margin-top: 20px;width: 200px;background: #eaeaea;
		}
		button{min-width: 64px;line-height: 20px;margin: 2px 10px;border-radius: 4px;color: #333;border: 1px solid #ccc;background-color: #fff;cursor: pointer;padding: 2px 7px 2px;color: #fff;background-color: #337ab7;border-color: #2e6da4;}
		#details{display: flex;align-items: center;
		    justify-content: center;}
		#details thead tr{height: 30px;}
			button.button,tr td button{padding: 2px 5px;margin:0px 3px;background: #009bce;border-radius: 4px;border: 1px;color: #fff;}
			
    </style>
    <script type="text/javascript">
    	// tree节点点击事件  name为这个节点的值
		function zTreeOnClick(event, treeId, treeNode) {
		    $("#site").val(treeNode.name);
		};
		var setting = {
			callback: {
				onClick: zTreeOnClick
			}
		};
		var zNodes =[
			{ name:"香港", open:true,
				children: [
					{ name:"九龙区",open:true,
						children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"旺角区",open:true,
					        children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"西贡区",open:true,
                            children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"油尖旺区",open:true,
                           children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						]},
					{ name:"深水埗区",open:true,
				           children: [
							{ name:"场所A" },
							{ name:"场所B" },
							{ name:"场所C" }
						   ]}
				]}
		];
    $(function(){
    	// $("#details").css("width",$("html").width()-250+"px")
    	// $(".listFilter").css("width",$("html").width()-200+"px")
    	// $(".reportResults").css("width",$("html").width()-200+"px")
    	// $("#tree").css("min-height",$("html").height()-150+"px")
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    function add(){
    	$(".k-overlay,.content").css("display","flex");
    }
    function save(){
    	zNodes[0].children[0].children.push({ name:"场所"+Math.floor(Math.random()*100),open:true});
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    	$(".k-overlay,.content").css("display","flex");
    }
    </script>
    <script type="text/javascript">
    	$(function(){
    	
    		$("div").click(function(e){
    			var id = $(this).attr("id");
    			if(id == "aaa"){
    				return false;
    			}else if(id == "tree"){
    				return false;
    			}else{
    				$("#tree").slideUp(300);
    			}
    			return false;
    		})

			$("#site").click(function(e){
				$("#tree").slideDown(300);
    		})

    		// $("#site").blur(function(e){
    		// 	$("#tree").slideUp(300);
    		// })
    		$("#tree").hover(function(){},function(){
    			$("#tree").slideUp(300);
    			// $("#site").blur();
    		})
    	})
    </script>
</head>
<body>
	<!-- 悬浮 -->
	<!-- <div id="list"> -->
		<!-- <span>场所列表</span> -->
		<!-- 树桩 -->
		<!-- <div id="tree"> -->
			<!-- <button style="float: right;" onclick="add()">增加</button> -->
			<!-- <ul id="treeDemo" class="ztree"></ul> -->
	    	<!-- </ul> -->
		<!-- </div> -->
	<!-- </div> -->

	<div class="pageheader">
		<div class="clear"></div>
		<!-- <img src="/Icons/zuzhi.png" alt="Customers" title="Customers"> -->
		<h1><script>document.write(language.weihu_zuzhi)</script></h1>
	</div>

	<div class="listFilter ">
		<h2><script>document.write(language.Filter)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2>
		<!-- <a href="#" class="tooltoggle">显示/隐藏工具提示</a> -->
		<div class="divider"></div>
	    <table width="100%">
	        <tbody>
	        	<tr>
		            <td class="FormLabel" style="width:auto;">
		            	<script>document.write(language.Place_name)</script>：
		            	<div style="display: inline-block; " id="aaa">
		            		<input name="site" type="text" id="site" placeholder="Please choose site">
			            	<!-- <button class='button select_site'><script>document.write(language.Choice_site)</script></button> -->
							<div id="tree">
								<!-- <button style="float: right;" onclick="add()">增加</button> -->
								<ul id="treeDemo" class="ztree"></ul>
						    	</ul>
							</div>
						</div>
		            	<script>document.write(language.Person_in_charge)</script>：
		            	<input name="ctl00$ContentPlaceHolder1$txtPostcode" type="text" id="ctl00_ContentPlaceHolder1_txtPostcode">
                        <button class='button'><script>document.write(language.Filter)</script></button>
                        <button class='button'><script>document.write(language.remove)</script></button>
		            </td>
                    <td style="text-align: right;">
                        <button class='button'><script>document.write(language.create)</script></button>
		            </td>
		        </tr>
		    </tbody>
		</table>
        <div class="formSubmit">
        	<!-- <button class='button'><script>document.write(language.Filter)</script></button> -->
        	<!-- <button class='button'><script>document.write(language.remove)</script></button> -->
        </div>
	</div>

	<div class="reportResults">
		<table class="list_table" id="ltReport_list" width="100%" cellspacing="0" style="text-align: center;">

			<thead>
				<!-- <tr>
					<td colspan="5" style="text-align:left;line-height: 40px;border-right: 0px;font-weight: bold;padding-left: 30px;">
						<script>document.write(language.weihu_zuzhi)</script><input type="text" placeholder="search" style="padding: 5px;margin-left: 20px;border-radius: 4px;border:1px solid #ccc;" /></td>
					<td colspan="3" style="text-align:right;line-height: 40px;border-left: 0px;"><button onclick="add()"><script>
								document.write(language.create)
							</script></button></td>
				</tr> -->
				<tr>
					<th style="width: 5%;"><script>document.write(language.order_number)</script></th>
					<th style="width: 10%;"><script>document.write(language.Place_name)</script></th>
					<th style="width: 10%;"><script>document.write(language.acreage)</script>(m³)</th>
					<th style="width: 15%;"><script>document.write(language.address)</script></th>
					<th style="width: 10%;"><script>document.write(language.Person_in_charge)</script></th>
					<th style="width: 10%;"><script>document.write(language.Person_in_charge_tel)</script></th>
					<th style="width: 10%;"><script>document.write(language.Person_in_charge_mail)</script></th>
					<th style="width: 10%;"><script>document.write(language.Superior_organization)</script></th>
					<th style="width: 10%;"><script>document.write(language.limit)</script></th>
				</tr>
			</thead>
			<tbody>
				<tr class="odd_row">
					<td>1</td>
					<td>Place A</td>
					<td>89</td>
					<td>No. 17, Taoyuan Road, layer 3, 1201</td>
					<td>Zhang San</td>
					<td>13834599847</td>
					<td>13834599847@163.com</td>
					<td>Kowloon</td>
					<td>100</td>
				</tr>
				<tr class="even_row">
					<td>2</td>
					<td>Place A</td>
					<td>89</td>
					<td>No. 17, Taoyuan Road, layer 3, 1201</td>
					<td>Wang Wu</td>
					<td>13834599847</td>
					<td>13834599847@163.com</td>
					<td>Kowloon</td>
					<td>100</td>
				</tr>
			</tbody>
		</table>
			<div class="ExportLinks">
				<a href="#"><script>document.write(language.Export_all_to)</script> Excel</a>
				<a href="#"><script>document.write(language.Export_this_page_to)</script> Excel</a>
				<a href="#"><script>document.write(language.Export_this_page_to)</script> PDF</a>
				<a href="#"><script>document.write(language.Export_all_to)</script> PDF</a>
				<a href="#"><script>document.write(language.send)</script> <script>document.write(language.email)</script></a>
			</div>

			<div class="WhereToLinks"></div>
	</div>


	<!-- <div class="k-overlay"></div>

	<div class="content">
		<table style="border-spacing:0px;">
			<thead>
				<tr>
					<td colspan="2" style="text-align:left;line-height: 40px;font-weight: bold;padding-left: 30px;">Newly added</td>
					<td colspan="2" style="text-align:right;line-height: 40px;"><button onclick='$(".k-overlay,.content").css("display","none");' style="border:0px;margin:0px;">X</button></td>
				</tr>
			</thead>
			<tbody>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
				<tr>
                	<td><script>document.write(language.Place_name)</script>:</td><td><input type="text" placeholder="place" /></td>
                	<td><script>document.write(language.Person_in_charge)</script>:</td><td><input type="text" placeholder="name" /></td>
            	</tr>
				<tr>
                	<td><script>document.write(language.Person_in_charge_tel)</script>:</td><td><input type="text" placeholder="12345678999" /></td>
                	<td><script>document.write(language.Superior_organization)</script>:</td><td><select style="width: 150px;height: 30px;"><option>九龙区</option></select></td>
                </tr>
				<tr>
                	<td><script>document.write(language.acreage)</script>(m³):</td><td><input type="text" value="area" /></td>
                	<td><script>document.write(language.address)</script>:</td><td><input type="text" value="address" /></td>
                </tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tbody>
			<tfoot>
                <tr style="line-height: 10px;"><td style="border-top: 1px solid #ccc;" colspan="4">&nbsp;</td></tr>
				<tr>
					<td></td>
					<td colspan="3" style="text-align: right;">
						<button onclick='$(".k-overlay,.content").css("display","none");'>cancel</button>
						<button onclick='save()'>save</button>
					</td>
				</tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tfoot>
		</table>
	</div> -->
</body>
</html>